<template>
  <div>
    <a-drawer placement="right" :closable="false" :visible="visible" @close="onClose" :destroyOnClose="true" :width="800">
      <a-tabs @change="tabsChange">
        <a-tab-pane key="1" tab="当前素材">
          <a-list :grid="{ gutter: 0 }" :data-source="dataList">
            <a-list-item slot="renderItem" slot-scope="item, index">
              <div class="edit-content">
                <div>
                  <img :src="item.themeCover" style="width: 60px; height: 60px" />
                </div>
                <div style="margin-left: 12px">
                  <div class="edit-title">{{ item.themeTitle }}</div>
                  <div>{{ item.themeCategory }}</div>
                </div>
                <a-icon type="close" style="margin-left: auto" @click="deleteClick(item.lookId)" />
              </div>
            </a-list-item>
          </a-list>
        </a-tab-pane>

        <a-tab-pane key="2" tab="历史链接" force-render>
          <a-list :grid="{ gutter: 0 }" :data-source="interList">
            <a-list-item slot="renderItem" slot-scope="item, index">
              <div class="edit-box">
                <a>
                  {{ shareLink(item.packNo) }}
                </a>
                <div style="margin-top: 16px">
                  <span>{{ item.packTime }}</span>
                  <span style="float: right; color: #1890ff; cursor: pointer" @click="copy(shareLink(item.packNo))" id="copy-want"> 复制 </span>
                </div>
              </div>
            </a-list-item>
          </a-list>
        </a-tab-pane>
      </a-tabs>
      <div class="drawer-btn">
        <a-button style="margin-right: 8px" :disabled="!deleteId" @click="emptyList">清空列表</a-button>

        <a-button type="primary" :disabled="!dataList" @click="linkClick">生成分享链接</a-button>
      </div>
    </a-drawer>
    <!-- 清空分享列表 -->
    <a-modal v-model="emptyVisible" @ok="emptyOk" :maskClosable="false" centered :width="400" :closable="false">
      <div class="edit-examine">
        <a-icon type="exclamation-circle" theme="filled" />
        <div class="examine">是否清空分享列表？</div>
      </div>
    </a-modal>
    <!-- 链接生成弹框 -->
    <a-modal v-model="linkVisible" @ok="linkOk" :maskClosable="false" centered :width="400" okText="复制链接" :closable="false">
      <div>
        <div class="edit-link">链接已生成</div>
        <a id="copycode">{{ copyLink }}</a>
      </div>
    </a-modal>
  </div>
</template>
<script>
import { currList, clearList, genLink, historyList } from '@/api/pos/match'
import Vue from 'vue'
import { USER_INFO } from '@/store/mutation-types'
export default {
  data() {
    return {
      visible: false,
      emptyVisible: false,
      linkVisible: false,
      userInfo: Vue.ls.get(USER_INFO),
      dataList: [],
      deleteId: '',
      copyLink: '',
      interList: []
    }
  },
  computed: {
    shareLink() {
      return packNo => {
        let href = window.location.protocol + '//' + window.location.host
        let sevice = process.env.NODE_ENV === 'test' ? href + '/jnby-boot-admin' : href
        return `${sevice}/share/pos+/match/collocation/partake/list/${packNo}`
      }
    }
  },
  methods: {
    tabsChange(key) {
      if (key == 1) {
        this.currInfo()
      } else {
        this.history()
      }
    },
    // 历史
    history() {
      let params = {
        workNo: this.userInfo.workNo
      }
      historyList(params).then(res => {
        if (res.code == 200) {
          this.interList = res.data
        }
      })
    },
    //删除
    deleteClick(id) {
      console.log(id)
      let params = {
        workNo: this.userInfo.workNo,
        id: this.deleteId,
        lookIds: [id]
      }
      clearList(params).then(res => {
        if (res.code == 200) {
          this.$message.success('删除成功！')
          this.currInfo()
        }
      })
    },
    copy(link) {
      const content = link
      var domUrl = document.createElement('input')
      domUrl.value = content
      domUrl.id = 'creatDom'
      document.body.appendChild(domUrl)
      domUrl.select() // 选择对象
      document.execCommand('Copy') // 执⾏浏览器复制命令
      let creatDom = document.getElementById('creatDom')
      creatDom.parentNode.removeChild(creatDom)
      this.$message.success('复制成功')
    },
    show() {
      this.visible = true
      this.currInfo()
    },
    currInfo() {
      let params = {
        workNo: this.userInfo.workNo
      }
      currList(params).then(res => {
        if (res.code == 200) {
          console.log(res, 'res')
          this.dataList = res.data.themePacks
          this.deleteId = res.data.id
        }
      })
    },
    onClose() {
      this.visible = false
    },
    emptyList() {
      // if (!this.deleteId) {
      //   this.$message.warning('素材列表为空')
      //   return
      // }
      this.emptyVisible = true
    },
    linkClick() {
      // if (this.dataList.length < 0) {
      //   this.$message.warning('暂无分享列表')
      //   return
      // }
      let params = {
        workNo: this.userInfo.workNo,
        id: this.deleteId
      }
      genLink(params).then(res => {
        if (res.code == 200) {
          console.log(res, 'res')
          let href = window.location.protocol + '//' + window.location.host
          let sevice = process.env.NODE_ENV === 'test' ? href + '/jnby-boot-admin' : href
          this.copyLink = `${sevice}/share/pos+/match/collocation/partake/list/${res.data.packNo}`
          console.log(this.copyLink)
        }
      })

      this.linkVisible = true
    },
    emptyOk() {
      let params = {
        workNo: this.userInfo.workNo,
        id: this.deleteId
      }
      clearList(params).then(res => {
        if (res.code == 200) {
          this.$message.success('清空成功！')
          this.emptyVisible = false
          this.currInfo()
        }
      })
    },
    linkOk() {
      const range = document.createRange()
      range.selectNode(document.getElementById('copycode')) //获取复制内容的 id 选择器
      const selection = window.getSelection() //创建 selection对象
      if (selection.rangeCount > 0) selection.removeAllRanges() //如果页面已经有选取了的话，会自动删除这个选区，没有选区的话，会把这个选取加入选区
      selection.addRange(range) //将range对象添加到selection选区当中，会高亮文本块
      document.execCommand('copy') //复制选中的文字到剪贴板
      this.$message.success('复制成功')
      selection.removeRange(range)
      this.linkVisible = false
      this.visible = false
    }
  }
}
</script>
<style scoped lang="less">
.edit-link {
  text-align: center;
  margin-bottom: 24px;
}
/deep/ .ant-list-grid .ant-col > .ant-list-item {
  border: 1px solid #eee;
}
.edit-content {
  display: flex;
  padding: 12px 12px;
}
.edit-box {
  padding: 12px 12px;
}
.edit-title {
  margin-top: 6px;
  margin-bottom: 5px;
}
.drawer-btn {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  border-top: 1px solid #e9e9e9;
  padding: 10px 16px;
  background: #fff;
  text-align: right;
  z-index: 1;
}
.edit-examine {
  display: flex;
  align-items: center;
}
.examine {
  font-size: 16px;
  padding: 24px;
  font-weight: 600;
}
/deep/.edit-examine .anticon {
  font-size: 22px;
  color: #faad14;
}
</style>
